<template>
  <div class="content" :style="`height: ${contentHeight}px;`">
    <div class="d-flex justify-between pt-10px">
      <div class="fullBtn ml-10px" @click="showFullScreen">{{ showFull ? '关闭' : '全屏' }}</div>
      <timeData class="time" />
    </div>
    <div class="d-flex justify-between">
      <div class="plan" v-loading="productPlanLoading">
        <div class="title">
          <div>生产计划列表</div>
        </div>
        <div class="tab">
          <el-row class="tabName">
            <el-col :span="2">订单号</el-col>
            <el-col :span="2">订单类型</el-col>
            <el-col :span="2">客户代码</el-col>
            <el-col :span="2">产品编号</el-col>
            <el-col :span="2">产品名称</el-col>
            <el-col :span="2">产品规格</el-col>
            <el-col :span="3">计划开始日期</el-col>
            <el-col :span="3">计划结束日期</el-col>
            <el-col :span="4">计划进度与实际进度(%)</el-col>
            <el-col :span="2">任务状态</el-col>
          </el-row>
          <div :style="`height: ${contentHeight * 0.83}px; overflow: hidden;`">
            <Vue3SeamlessScroll
              :list="productPlanList"
              :step="0.1"
              :hover="true"
              :limitScrollNum="10"
              :isWatch="true"
              :copyNum="2"
            >
              <el-row
                class="tabItem"
                :class="{ bg: index % 2 !== 0, active: productPlanIndex === index }"
                v-for="(item, index) in productPlanList"
                :key="index"
              >
                <el-col :span="2">
                  <div class="wordWrap">
                    <div class="word">{{ item['orderNumber'] }}</div>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="wordWrap">
                    <div class="word">
                      <dict-tag type="market_order_type" :value="item['dictOrderType']" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="wordWrap">
                    <div class="word">{{ item['customerCode'] }}</div>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="wordWrap">
                    <div class="word">{{ item['productNumber'] }}</div>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="wordWrap">
                    <div class="word">{{ item['productName'] }}</div>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="wordWrap">
                    <div class="word">{{ item['productStandard'] }}</div>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="wordWrap">
                    <div class="word">{{ item['planStartDate'] }}</div>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="wordWrap">
                    <div class="word">{{ item['planEndDate'] }}</div>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="wordWrap">
                    <div style="width: 100%">
                      <el-progress
                        class="mb-5px"
                        :percentage="item['planProgress']"
                        :color="customColorMethod(item['status'])"
                      />
                      <el-progress
                        :percentage="item['actualProgress']"
                        :color="customColorMethod(item['status'])"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div class="wordWrap">
                    <div
                      class="circle mr-10px"
                      :style="`background-color: ${customColorMethod(item['status'])}`"
                    ></div>
                    <div class="word">{{ item['status'] }}</div>
                  </div>
                </el-col>
              </el-row>
            </Vue3SeamlessScroll>
          </div>
        </div>
      </div>
      <div class="process" v-loading="partLoading">
        <div class="title">
          <div>生产进度明细</div>
        </div>
        <div class="d-flex flex-col align-end">
          <div class="product mt-10px">
            <div class="info">
              <div class="d-flex align-center justify-between">
                <img src="@/assets/production/sub_process_product.png" class="icon" />
                <div v-if="productPlanList.length">
                  <div class="text-blue ellipsis order">{{
                    productPlanList[productPlanIndex]['orderNumber']
                  }}</div>
                  <div class="text-white ellipsis productNumber">{{
                    productPlanList[productPlanIndex]['productNumber']
                  }}</div>
                </div>
              </div>
              <div
                class="d-flex align-center justify-between mt-20px"
                v-if="productPlanList.length"
              >
                <el-progress
                  class="el-process mr-10px"
                  :percentage="productPlanList[productPlanIndex]['actualProgress']"
                  :color="customColorMethod(productPlanList[productPlanIndex]['status'])"
                />
                <div class="text-white ellipsis productName">{{
                  productPlanList[productPlanIndex]['productName']
                }}</div>
              </div>
            </div>
          </div>
          <div class="part">
            <div v-for="(item, index) in partList" :key="index" class="mt-10px">
              <div class="font-14px text-white">{{ item['partType'] }}</div>
              <el-progress
                class="el-process mt-10px"
                :percentage="item['planProgress']"
                :color="customColorMethod('已延时')"
              />
              <el-progress
                class="el-process mt-10px"
                :percentage="item['actualProgress']"
                :color="customColorMethod('已延时')"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="task">
        <div class="status-wrap mb-20px" v-loading="productPlanLoading">
          <div class="title">
            <div>任务状态看板</div>
          </div>
          <div class="d-flex flex-wrap justify-center" :style="`height: ${contentHeight * 0.22}px`">
            <div class="status">
              <div class="des">未开始</div>
              <div class="text-white big-number">{{ taskStatus.noStart }}</div>
            </div>
            <div class="status">
              <div class="des">进行中</div>
              <div class="text-white big-number">{{ taskStatus.underway }}</div>
            </div>
            <div class="status">
              <div class="des">已完成</div>
              <div class="text-white big-number">{{ taskStatus.completed }}</div>
            </div>
            <div class="status">
              <div class="des">已延时</div>
              <div class="text-white big-number">{{ taskStatus.delayed }}</div>
            </div>
            <div class="status">
              <div class="des">已取消</div>
              <div class="text-white big-number">{{ taskStatus.canceled }}</div>
            </div>
            <div class="status">
              <div class="des">已暂停</div>
              <div class="text-white big-number">{{ taskStatus.paused }}</div>
            </div>
          </div>
        </div>
        <div v-loading="completeRateLoading">
          <div class="title">
            <div>七日完工率</div>
          </div>
          <Echart :options="lineOptionsData" :height="contentHeight * 0.25" />
        </div>
        <div v-loading="teamTaskLoading">
          <div class="title">
            <div>班组任务看板</div>
          </div>
          <div class="tab" :style="`height: ${contentHeight * 0.3}px`">
            <el-row class="tabName">
              <el-col :span="6">班组</el-col>
              <el-col :span="6">任务总数</el-col>
              <el-col :span="6">完成任务数</el-col>
              <el-col :span="6">返工率(%)</el-col>
            </el-row>
            <el-row
              class="tabItem"
              :class="{ bg: index % 2 !== 0 }"
              v-for="(item, index) in teamTask"
              :key="index"
            >
              <el-col :span="6">
                <dict-tag type="craft_process_name" :value="item['dictProcessName']" />
              </el-col>
              <el-col :span="6">{{ item['taskQuantity'] }}</el-col>
              <el-col :span="6">{{ item['completeQuantity'] }}</el-col>
              <el-col :span="6">{{ item['reworkRate'] }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import timeData from '../components/time.vue'
  import { EChartsOption } from 'echarts'
  import { lineOptions, ProductListType } from './echarts-data'
  import * as ProductionApi from '@/api/visualized/production'
  import { set } from 'lodash-es'
  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

  const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
  const contentHeight = ref()
  contentHeight.value = document.body.clientHeight - 125
  const productPlanList = ref<ProductListType[]>([]) //生产计划列表
  const taskStatus = ref({
    canceled: 0,
    paused: 0,
    underway: 0,
    delayed: 0,
    completed: 0,
    noStart: 0
  }) //任务状态看板
  const teamTask = ref([]) //班组任务看板
  const partList = ref([]) //部件列表
  const productPlanLoading = ref(false) //生产计划加载
  const teamTaskLoading = ref(false) //班组任务看板加载
  const partLoading = ref(false) //部件加载
  const completeRateLoading = ref(false) //七日完工率加载
  const productPlanIndex = ref(0) //生产计划列表滚动选中下标

  const showFull = ref(false) //是否全屏
  let scrollProductTime = null

  // 全屏/退出全屏
  const showFullScreen = () => {
    let el = document.querySelector('.content')
    if (showFull.value) {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      }
    } else {
      // 全屏
      if (el.requestFullscreen) {
        el!.requestFullscreen()
      } else if (el.mozRequestFullScreen) {
        el!.mozRequestFullScreen()
      } else if (el.webkitRequestFullScreen) {
        el!.webkitRequestFullScreen()
      }
    }
    showFull.value = !showFull.value
  }

  // 设置产品进度颜色
  const customColorMethod = (status: string) => {
    switch (status) {
      case '未开始':
        return '#529BFF'
      case '进行中':
        return '#00D2D7'
      case '已完成':
        return '#51E392'
      case '已延时':
        return '#FF5E44'
      case '已暂停':
        return '#FFF336'
      case '已取消':
        return '#80A3A2'
    }
  }

  // 获取生产计划列表、任务状态看板
  const getProductTaskStatus = async () => {
    productPlanLoading.value = true
    try {
      const data = await ProductionApi.getScreenProductionList()
      productPlanList.value = data.productionSchedule
      taskStatus.value = data.taskStatus
    } finally {
      productPlanLoading.value = false
    }
  }

  // 获取生产进度明细
  const getPartList = async () => {
    partLoading.value = true
    try {
      partList.value = await ProductionApi.getScreenProductionPartList({
        productNumber: productPlanList.value[productPlanIndex.value]['productNumber']
      })
    } finally {
      partLoading.value = false
    }
  }

  // 获取七日完工率
  const getCompleteRate = async () => {
    completeRateLoading.value = true
    try {
      const data = await ProductionApi.getScreenCompleteRate()
      lineOptionsData!.series![0].data = data.map((v) => {
        return v.completedRate * 100
      })
      set(
        lineOptionsData,
        'xAxis.data',
        data.map((v) => {
          return v['insertDate']
        })
      )
    } finally {
      completeRateLoading.value = false
    }
  }

  // 获取班组任务看板
  const getTeamTask = async () => {
    teamTaskLoading.value = true
    try {
      teamTask.value = await ProductionApi.getScreenTeamTask()
    } finally {
      teamTaskLoading.value = false
    }
  }

  onMounted(async () => {
    getCompleteRate()
    getTeamTask()
    await getProductTaskStatus()
    getPartList()
    scrollProductTime = setInterval(() => {
      if (productPlanIndex.value === productPlanList.value.length - 1) {
        productPlanIndex.value = 0
      } else {
        productPlanIndex.value += 1
      }
      getPartList()
    }, 19000)
    setInterval(() => {
      getCompleteRate()
      getTeamTask()
      getProductTaskStatus()
    }, 3600000)
    window.addEventListener('resize', () => {
      if (showFull.value) {
        // 全屏时高度为视口高度
        contentHeight.value = document.body.clientHeight
      } else {
        contentHeight.value = document.body.clientHeight - 125
      }
    })
  })

  onBeforeUnmount(() => {
    clearInterval(scrollProductTime)
    scrollProductTime = null
  })
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    padding: 0 9px;
    background-image: url('@/assets/production/index_bg.png');
    background-size: 100% 100%;
    overflow: hidden;
    box-sizing: border-box;

    .d-flex {
      display: flex;
    }

    .align-center {
      align-items: center;
    }

    .align-end {
      align-items: end;
    }

    .text-blue {
      color: #00dbe0;
    }

    :deep(.el-progress-bar__outer) {
      background-color: #1e484f;
    }

    :deep(.el-progress__text) {
      color: #fff;
    }

    .fullBtn {
      width: 40px;
      height: 26px;
      text-align: center;
      cursor: pointer;
      border: 1px solid #45e0dc;
      border-radius: 5px;
      background: linear-gradient(0deg, #45e0dc 0%, #161f24 59%, #161f24 100%);
      color: #45e0dc;
    }

    .title {
      font-size: 1rem;
      font-weight: 600;
      color: #d4fffb;
      box-sizing: border-box;
      overflow: hidden;

      div {
        margin-top: 0.75rem;
      }
    }

    .tab {
      text-align: center;

      .bg {
        background-color: rgb(44 86 88 / 20%);
      }

      .tabName {
        background-color: rgb(44 86 88 / 20%);
        color: #7cc9c2;
        height: 56px;
        line-height: 56px;
        font-size: 14px;
      }

      .tabItem {
        height: 64px;
        color: #fff;
        word-wrap: break-word;

        &.active {
          border: 1px solid #00d2d7;
        }

        .wordWrap {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
        }

        .word {
          word-break: break-all;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }

    .plan {
      width: 57%;

      .title {
        width: 70%;
        height: 2.56rem;
        background-image: url('@/assets/production/index_title.png');
        background-size: 100% 100%;

        div {
          margin-left: 3.875rem;
        }
      }

      .tabItem {
        font-size: 13px;
      }

      .circle {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
      }
    }

    .process {
      width: 19.75rem;

      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .order,
      .productNumber {
        width: 6.25rem;
      }

      .productName {
        width: 4.375rem;
      }

      .title {
        width: 100%;
        height: 2.56rem;
        background-image: url('@/assets/production/sub_prcess_title.png');
        background-size: 100% 100%;

        div {
          margin-left: 2.375rem;
        }
      }

      .product {
        width: 16rem;
        height: 7.5rem;
        background-image: url('@/assets/production/sub_process_product_border.png');
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 2.1875rem;
        margin-right: 0.625rem;

        .info {
          width: 100%;
          text-align: right;

          .el-process {
            width: 7.5rem;
          }

          .icon {
            width: 2.75rem;
          }
        }
      }

      .part {
        width: 14.875rem;
        margin-right: 0.625rem;
      }
    }

    .task {
      width: 28.0625rem;

      .title {
        width: 100%;
        height: 2.75rem;
        background-image: url('@/assets/production/sub_task_title.png');
        background-size: 100% 100%;

        div {
          margin-left: 2rem;
        }
      }

      .status-wrap {
        .status {
          width: 8.5rem;
          height: 5rem;
          padding: 0 0.5rem;
          text-align: center;
          margin-top: 1.25rem;
          box-sizing: border-box;
          background-size: 7.375rem 2.5rem;
          background-position: bottom center;
          background-repeat: no-repeat;

          .des {
            font-size: 12px;
            font-weight: 300;
            color: #fefefe;
            opacity: 0.68;
          }

          .big-number {
            font-size: 26px;
            font-weight: 700;
            color: #fff;
          }
        }

        .status:nth-child(1) {
          background-image: url('@/assets/visualized/notStarted.png');
        }

        .status:nth-child(2) {
          background-image: url('@/assets/visualized/have.png');
        }

        .status:nth-child(3) {
          background-image: url('@/assets/visualized/completed.png');
        }

        .status:nth-child(4) {
          background-image: url('@/assets/visualized/timeout.png');
        }

        .status:nth-child(5) {
          background-image: url('@/assets/visualized/cancellation.png');
        }

        .status:nth-child(6) {
          background-image: url('@/assets/visualized/suspend.png');
        }
      }

      .tabName,
      .tabItem {
        height: 2rem;
        line-height: 2rem;
      }
    }
  }
</style>